<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/res/layui/css/layui.css">
  <script src="/res/layui/layui.js" charset="utf-8"></script>
  <style>
    li {
      cursor: pointer;
      line-height: 25px;
    }

    li:hover {
      background-color: #eeeeee;
    }
  </style>
</head>
<body style="padding-top: 15px;padding-left: 20px;">
<span style="margin: 10px 20px;">当前选中机构：</span><span id="c-title"></span><br>
<div id="scom" style="margin: 5px 10px;">
</div>
<script>
  layui.use(['layer', 'jquery'], function () {
    var layer = layui.layer;
    var $ = layui.jquery;
    var clickTag = []

    $.ajax({
      data: {companyCode: '00000000', level: 2, findSub: false},
      url: '/getCompanyData',
      //sync: false, //使用同步
      success(data) {
        if (data.code == 0) {
          for (var i = 0; i < data.data.length; i++) {
            $('#scom').append(
                '<li id="' + data.data[i].id + '-' + data.data[i].level + '">' +
                '<i id="i-' + data.data[i].id
                + '" class="layui-icon layui-icon-left" style="margin-right: 5px;"></i>'
                + data.data[i].title + '</li>')
          }
        } else {
          layer.msg(data.message)
        }
        console.log(data)
      }
    })

    $('#scom').on('click', 'li', function () {
      var id = $(this).attr('id')
      var level = id.split('-')[1]
      var com = id.split('-')[0]
      $('#c-title').html($(this).text())
      $('#i-' + com).toggleClass('layui-icon-left').toggleClass('layui-icon-down')
      if (hasId(clickTag, id)) {
        if ($('#son-' + com).css('display') == 'none') {
          $('#son-' + com).show()
        } else {
          $('#son-' + com).hide()
        }
        return
      } else {
        clickTag.push(id)
      }
      var left = 20;
      if (level == 2) {
        left = 20
      } else if (level == 3) {
        left = 40
      }
      $.ajax({
        data: {companyCode: com, level: level, findSub: true},
        url: '/getCompanyData',
        sync: false, //使用同步
        success(data) {
          if (data.code == 0) {
            var html = ''
            if (data.data != null && data.data != '') {
              for (var i = 0; i < data.data.length; i++) {
                html = html + '<li style="margin-left: ' + left + 'px" id="' + data.data[i].id + '-'
                    + data.data[i].level + '">' +
                    '<i id="i-' + data.data[i].id
                    + '" class="layui-icon layui-icon-left" style="margin-right: 5px;"></i>'
                    + data.data[i].title + '</li>\n'
              }
              $('#' + id).after('<div id="son-' + com + '">' + html + '</div>')
            }
          } else {
            layer.msg(data.message)
          }
        }
      })

    })
  });

  function hasId(data, id) {
    if (data == null || data == '') {
      return false
    }
    for (var i = 0; i < data.length; i++) {
      if (data[i] == id) {
        return true
      }
    }
  }
</script>
</body>
</html>
